// 文件是 gulp 的配置文件
const gulp = require("gulp"); // gulp 基于 nodejs 的打包工具  commonJS
const fs = require("fs");
// 导入 gulp-babel 插件
const babel = require("gulp-babel");
// 导入 browserify 打包插件
const browserify = require('gulp-browserify');
// 导入重命名插件
const rename = require('gulp-rename');
// 导入压缩代码的插件
const uglify = require('gulp-uglify');
//编译 less 的插件
const less = require('gulp-less');
//自动添加样式前缀的插件
const LessAutoprefix = require('less-plugin-autoprefix');
//实例化对象                           这里设置代码运行的目标浏览器
const autoprefix = new LessAutoprefix({ browsers: ['last 20 versions'] });
//压缩 css 的插件
const cssmin = require('gulp-cssmin');
//合并 css 的插件
const concat = require('gulp-concat');
//压缩 html 的插件
const htmlmin = require('gulp-htmlmin');
//热加载插件
const livereload = require('gulp-livereload');
//创建 http 服务插件
const connect = require('gulp-connect');
//自动打开浏览器的插件
const opn = require('opn');

//创建 gulp 任务
gulp.task("hello", () => {
  console.log("Hello Gulp");
  //返回一个可读流对象
  return fs.createReadStream("./package.json");
});

//语法转换的任务
gulp.task("babel", () => {
  return gulp
    .src("./src/js/*.js") // 指定处理所有JS文件
    .pipe(
      babel({
        // 对JS使用Babel进ES6转ES5
        presets: ["@babel/preset-env"],
      })
    )
    .pipe(gulp.dest("build/js")).pipe(livereload()); // 输出到指定目录  dest 目的地
});

//打包文件的任务  readStream.pipe(writeStream)
gulp.task('browserify', () => {
  return gulp.src('./build/js/index.js') //打包的入口文件
    .pipe(browserify())					// 将CommonJs语法转换为浏览器能识别的语法
    .pipe(rename('bundle.js'))			// 为了防止冲突将文件重命名
    .pipe(gulp.dest('build/js')).pipe(livereload())		// 输出到指定位置
});

//压缩代码的任务
gulp.task('uglify', function () {
  return gulp.src('build/js/bundle.js')
    .pipe(uglify())  //压缩js
    .pipe(rename('bundle.min.js')) //重命名
    .pipe(gulp.dest('dist/js')).pipe(livereload()) //放置到指定的文件夹中
});

//
gulp.task('default', gulp.series('babel', 'browserify', 'uglify'));

//编译 less 添加样式前缀的任务
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({
      plugins: [autoprefix] // 自动扩展前缀
    }))
    .pipe(gulp.dest('./build/css')).pipe(livereload())
});

//合并 css 的任务
gulp.task('concat', function () {
  return gulp.src('./build/css/*.css')
      .pipe(concat('bundle.css'))
      .pipe(gulp.dest('./build/css/concat')).pipe(livereload())
});

//压缩 css 的任务
gulp.task('cssmin', function () {
  return gulp.src('./build/css/concat/bundle.css')
      .pipe(cssmin())
      .pipe(rename('bundle.min.css'))
      .pipe(gulp.dest('./dist/css')).pipe(livereload())
});

//压缩 html 的任务
gulp.task('htmlmin', () => {
  return gulp.src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true ,//去除空格
      removeComments:true //去除注释
    }))
    .pipe(gulp.dest('dist')).pipe(livereload())
})

// 2. 定义监视任务
gulp.task('watch', function () {
  //2.1 启动热加载服务
  livereload.listen();
  //2.2 通过自己服务器打开项目，自动刷新
  connect.server({
      root: 'dist', // 静态资源文件夹是 dist
      port: 3000,
      livereload: true
  });
  //2.3. 自动打开浏览器
  opn('http://localhost:3000/index.html');
  //2.4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
  gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
  gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
  gulp.watch('./src/index.html', gulp.series('htmlmin'));
});